<script setup>

import {onMounted, ref} from "vue";
import {doDelete, doGet, doPost, doPut} from "@/util/request.js";
import {useRoute, useRouter} from "vue-router";
import {showMessage} from "@/util/message.js";

//对话框打开
const dialogVisible = ref(true)
//用户详情对象
const activityDetail = ref({})
// 获取路由参数
const route = useRoute()
//获取路由对象
const router = useRouter()
//操作类型
const type = ref('add')
//查询用户详情
const loadActivityDetail = (activityId) => {
  //发送请求，获取用户详情
  doGet('/api/activity/detail/' + activityId, {}).then(resp => {
    if (resp.data.code === 200) {
      activityDetail.value = resp.data.data
    } else {
      showMessage('查询活动详情失败', resp.data.msg, 'error')
    }
  })
}
/*-----------------表单验证规则-------------------*/
const editActivity = {
  ownerId: [
    {required: true, message: '负责人不能为空', trigger: 'blur'},
  ],
  name: [
    {required: true, message: '活动名称不能为空', trigger: 'blur'},
    {min: 2, max: 20, message: '活动名称长度在2-20个字符', trigger: 'blur'}
  ],
  activityTime: [
    {required: true, message: '活动时间不能为空', trigger: 'blur'},
  ],
  cost: [
    {required: true, message: '活动预算不能为空', trigger: 'blur'},
    {pattern: /^[1-9]\d*(\.\d+)?$|^0\.\d*[1-9]\d*$/, message: '活动预算必须大于0'}
  ],
  description: [
    {required: true, message: '活动描述不能为空', trigger: 'blur'},
    {min: 2, max: 200, message: '活动描述长度在2-100个字符', trigger: 'blur'}
  ]
}
/*-----------编辑信息------------*/
//提交修改信息对象参数
let editFrom = ref({})
//提交修改信息
const submitForm = () => {
  editFrom.value.validate((valid) => {
    if (valid) {
      let endTime = ''
      let startTime = ''
      for (let key in activityDetail.value.activityTime) {
        if (key === '0') {
          startTime = activityDetail.value.activityTime[key]
        } else if (key === '1') {
          endTime = activityDetail.value.activityTime[key]
        }
      }
      let editData = {
        id: activityDetail.value.id,
        ownerId: activityDetail.value.ownerId,
        name: activityDetail.value.name,
        startTime: startTime,
        endTime: endTime,
        cost: activityDetail.value.cost,
        description: activityDetail.value.description,
      };
      alert("开始时间"+startTime + "结束时间"+endTime)
      if (type.value === 'edit') {
        //发送请求
        doPut('/api/activity/editActivity', editData).then(resp => {
          if (resp.data.code === 200) {
            console.log(resp.data.code)
            //提示信息
            showMessage('修改活动信息成功', 'success')
            //等待600毫秒
            setTimeout(() => {
              //刷新页面
              /* location.reload();*/
              //返回上一页
              router.go(-1)
            }, 600)
          } else {
            //提示信息
            showMessage('修改活动信息失败', 'error')
          }
        })
      } else if (type.value === 'add') {
        //发送请求
        doPost('/api/activity/addActivity', editData).then(resp => {
          if (resp.data.code === 200) {
            //提示信息
            showMessage('添加活动成功', 'success')
            //等待600毫秒
            setTimeout(() => {
              //刷新页面
              /* location.reload();*/
              //返回上一页
              router.go(-1)
            }, 600)
          } else {
            //提示信息
            showMessage('添加活动失败', 'error')
          }
        })
      }
    } else {
      showMessage('请检查信息是否完整', 'error')
    }
  })
}
/*---------负责人----------*/
const options = ref([])
const loadOptions = () => {
//查询负责人
  doGet('/api/activity/ownerList', {}).then(resp => {
    if (resp.data.code === 200) {
      options.value = resp.data.data
    } /*else {
      showMessage('查询负责人失败', resp.data.msg, 'error')
    }*/
  })
}
/*-----------编辑信息------------*/
onMounted(() => {
  let activityId = route.params.id;
  if (activityId) {
    type.value = 'edit'
    loadActivityDetail(activityId)
  } else {
    type.value = 'add'
  }
  loadOptions()
})
</script>

<template>

  <el-dialog
      v-model="dialogVisible"
      width="700"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :align-center="true"
      :center="true"
      :show-close="false"
      :title="type==='edit'?'编辑活动':'添加活动'">

    <el-form
        ref="editFrom"
        :rules="editActivity"
        :model="activityDetail">
      <el-form-item label="活动编号: " v-if="type==='edit'">
        {{ activityDetail.id }}
      </el-form-item>
      <el-form-item label="负责人: " v-if="type==='edit'" prop="ownerId">
        &nbsp;&nbsp;&nbsp;
        <el-select style="width: 450px" v-model="activityDetail.ownerId" placeholder="请选择负责人">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>

      <el-form-item label="活动名称: " prop="name">
        <el-input v-model="activityDetail.name" placeholder="请输入活动名称"/>
      </el-form-item>

      <!--      <el-form-item label="开始时间: " prop="startTime">
              <el-date-picker
                  v-model="activityDetail.startTime"
                  type="datetime"
                  placeholder="请选择开始日期"
                  style="width: 450px"
                  value-format="YYYY-MM-DD hh:mm:ss"/>
            </el-form-item>

            <el-form-item label="结束时间: " prop="endTime">
              <el-date-picker
                  v-model="activityDetail.endTime"
                  type="datetime"
                  placeholder="请选择结束日期"
                  style="width: 450px"
                  value-format="YYYY-MM-DD hh:mm:ss"/>
            </el-form-item>-->
      <el-form-item label="活动时间: " style="width: 532px" prop="activityTime">
        <el-date-picker
            v-model="activityDetail.activityTime"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD hh:mm:ss"/>
      </el-form-item>

      <el-form-item label="活动预算: " prop="cost">
        <el-input v-model="activityDetail.cost" placeholder="请选择活动预算"/>
      </el-form-item>

      <el-form-item label="活动描述: " prop="description">
        <el-input type="textarea" style="width: 450px; min-height: 50px; max-height: 200px; resize: vertical;"
                  :rows="3"
                  placeholder="请选择活动描述"
                  v-model="activityDetail.description"/>
      </el-form-item>

      <div style="margin-left: 450px">
        <el-button type="info" @click="router.back()">返回</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<style scoped>
.el-form {
  margin-left: 80px;
}

.el-form-item {
  margin-left: 30px;
}

.el-select {
  width: 392px;
}

.el-input {
  width: 450px;
}

.el-col {
  margin-top: 20px;
  margin-left: 50px;
}
</style>